<template>
	<view class="from_class">
		<!-- 判断显示哪一个如果为真就显示账号密码登录 如果为假就显示手机登录 -->
		<view class="bottom_mar" v-if="isPassword">
			<view>
				<u--form labelPosition="top" :model="userInfo" labelWidth="auto" :rules="rules" ref="form">
					<u-form-item label="账户号码" prop="member_name">
						<u--input v-model="userInfo.member_name" prefixIcon="../../static/img/login/user.svg"
							placeholder="请输入您的账户"></u--input>
					</u-form-item>
					<u-form-item label="账户密码" prop="member_passwd">
						<u--input v-model="userInfo.member_passwd" prefixIcon="../../static/img/login/password.svg"
							placeholder="请输入您的密码" :password="isCanSeePassword">
							<template slot="suffix">
								<u-icon name="eye-fill" @click="canSeeButton" v-if="!canSee"></u-icon>
								<u-icon name="eye-off" @click="canSeeButton" v-else></u-icon>
							</template>
						</u--input>
					</u-form-item>
				</u--form>
			</view>
			<view class="phone" @click="change()">
				手机短信验证登录
			</view>
		</view>
		<view class="bottom_mar" v-else>
			<view>
				<u--form labelPosition="top" :model="userInfoPhone" labelWidth="auto" :rules="rulesTwo" ref="form">
					<u-form-item label="手机号码" prop="phoneNumber">
						<u--input v-model="userInfoPhone.phoneNumber" prefixIcon="../../static/img/login/phone.svg"
							placeholder="请输入您的手机号" type="number"></u--input>
					</u-form-item>
					<u-form-item label="短信验证" prop="code">
						<u-input placeholder="请输入您的验证码" prefixIcon="../../static/img/login/password.svg"
							v-model="userInfoPhone.code">
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"
									start-text="获取"></u-code>
								<u-button @tap="getCode" :text="tips" size="mini" class="getcode_class"></u-button>
							</template>
						</u-input>
					</u-form-item>
				</u--form>
			</view>
			<view class="phone" @click="change()">
				账号密码登录
			</view>
		</view>
		<!-- 下方是都有的东西 -->
		<view class="">
			<u-button type="error" class="btn_class" @click="loginButton(userInfo)" v-if="isPassword">登录</u-button>
			<u-button type="error" class="btn_class" @click="loginButton(userInfoPhone)" v-else>登录</u-button>
			<u-button plain class="btn_class" @click="regester">注册</u-button>
		</view>
		<!-- 沟通协议 -->
		<view class="isAgree">
			<u-checkbox-group v-model="checkboxValue" placement="column" @change="getcheck">
				<u-checkbox v-for="(item, index) in checkboxList" :key="index" :label="item.name" :name="item.name"
					shape="circle" activeColor="#F04B3F">
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<!-- 忘记密码 -->
		<view class="forgetPass">
			<u-divider text="OR"></u-divider>
			<text @click="findPass">忘记密码</text>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '@/api/wei/index.js'
	export default {
		data() {
			return {
				isPassword: true,
				height: 300,
				tips: '13',
				userInfo: {
					member_name: '',
					member_passwd: '',
				},
				userInfoPhone: {
					phoneNumber: '',
					code: '',
				},
				checkboxList: [{
					id: 1,
					name: '我已阅读并同意《用户协议》、《隐私政策》和《登录政策》'
				}],
				checkboxValue: [],
				canSee: true,
				isCanSeePassword: true,
				rules: {
					member_name: [{
						required: true,
						message: '请输入账户号码',
						trigger: ['blur', 'change']
					}],
					member_passwd: [{
						required: true,
						message: '请输入账户密码',
						trigger: ['blur', 'change']
					}],
				},
				rulesTwo: {
					// 字段名称
					phoneNumber: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['blur', 'change'],
						}
					]
				}
			}
		},
		methods: {
			change() {
				this.isPassword = !this.isPassword
				console.log("切换" + this.isPassword)
			},
			getcheck(e) {
				// console.log(e)
			},
			regester() {
				uni.navigateTo({
					url: "/pages/login/regester"
				})
			},
			findPass() {
				uni.navigateTo({
					url: '/pages/login/findPass'
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			// end() {
			// 	uni.$u.toast('倒计时结束');
			// },
			// start() {
			// 	uni.$u.toast('倒计时开始');
			// },
			canSeeButton() {
				// console.log(132)
				this.canSee = !this.canSee;
				this.isCanSeePassword = !this.isCanSeePassword
			},
			loginButton(userInfo) {
				// console.log(userInfo);
				this.$refs.form.validate().then(res => {
					if (this.checkboxValue.length > 0) {
						login(userInfo).then(result => {
							console.log(result)
							// console.log(1111)
							if (result.data.code === 200) {
								//在起始页面跳转到test.vue页面并传递参数
								uni.$u.toast('登录成功')
								uni.switchTab({
									url: '/pages/index/index'
								})
							} else {
								uni.$u.toast('账号或者密码错误');
								this.userInfo.member_name = '';
								this.userInfo.member_passwd = '';
								this.userInfo.phoneNumber = '';
								this.userInfo.code = '';
							}
						})
					} else {
						uni.$u.toast('请勾选协议')
					}
				}).catch(errors => {
					uni.$u.toast('请输入账户号码或者密码')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import url('../../static/css/login.css');

	.from_class {
		.phone {
			float: right;
			color: red;
			// font-size: 20rpx;
			margin: 1rem 0;
		}
	}

	.isAgree {
		margin: 2rem 0;
	}

	.forgetPass {
		text-align: center;
		color: #F04B3F;
	}
</style>